<template>
	<transition>
		<div class="shopcar">
			<header-component></header-component>
			<div class="content">
				<ul>
					<li>
						<p>
							<span @click="bools">
								<transition>
									<i v-if="bj"></i>
								</transition>
							</span>
							<span>
								<img src="~imgs/shop_cart_1.gif"/>
							</span>
						</p>
						<p>
							<span>
								<em>
									<i>大屏智能车载导航一体机</i>
									<i>思坦博商城榜销量TOP 1</i>
									<i>商务黑</i>
								</em>
								<em>
									<img src="~imgs/shop_cart_2.gif"/>
								</em>
							</span>
							<span>
								<em>￥2999</em>
								<em>
									<i>-</i>
									<span>×<i>1</i></span>
									<i>+</i>
								</em>
							</span>
						</p>
					</li>
				</ul>
			</div>
			<div class="like">
				<div class="title">
					<p>
						<img src="~imgs/shop_cart_4.gif"/>
						你可能还喜欢
					</p>
				</div>
				<ul>
					<li v-for="i in shopcar" :key="i.id">
						<img :src="i.img_src"/>
						<p v-text="i.txt"></p>
						<p>
							<span>{{i.price | decimal}}</span>
							<span><i v-text="i.num"></i>人已购买</span>
						</p>
					</li>
				</ul>
			</div>
			<div class="pay">
				<p>
					<span @click="bools">
						<transition>
							<i v-if="bj"></i>
						</transition>
					</span>
					<span>全选</span>
					<span>
						<em>含运费</em>
						合计：<i>3998</i>
					</span>
				</p>
				<span>结算(<i>2</i>)</span>
			</div>
		</div>
	</transition>
</template>

<script>
	import Header from "./components/Header"
	import axios from "axios"
	export default {
		data(){
			return{
				bj:false,
				shopcar:[]
			}
		},
		components:{
			"header-component":Header
		},
		methods:{
			bools () {
				this.bj = !this.bj;
			}
		},
		mounted(){
			axios.get("/api/shopcar.json").
			then(res => {
				this.shopcar = res.data.data.shopcar;
			})
		},
		filters:{
			decimal(val){
				return "￥" + val.toFixed(2)
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.v-enter
		transform: translate3d(100%, 0, 0);
	.v-leave-to
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		position: absolute;
		width: 0;
		height: 0;
	.v-enter-active
		transition: all .3s;
	.v-leave-active
		opacity: 0;
		width: 0;
		height: 0;
		transform: translate3d(100%, 0, 0);
		position: absolute;
		transition: all .00001s;
	.shopcar
		overflow-x: hidden;
		width: 100%;
		position: absolute;
		.content
			width: 100%;
			overflow: hidden;
			ul
				width: 6.78rem;
				margin: 0 auto;
				li
					height: 2.58rem;
					width: 100%;
					border: 0.01rem solid #67adf0;
					margin-top: 0.3rem;
					border-radius: 0.1rem;
					overflow: hidden;
					p
						float:left;
						height: 100%;
					p:first-child
						display: flex;
						align-items: center;
						span:first-child
							width: 0.3rem;
							height: 0.3rem;
							border-radius: 50%;
							display: block;
							float: left;
							border: 0.01rem solid #515151;
							margin: 0 0.2rem;
							i
								width: 100%;
								height: 100%;
								border-radius: 50%;
								display: block;
								background: url("~imgs/shop_cart_3.gif")no-repeat center;
								background-size: 0.16rem 0.16rem;
						span:last-child
							float: left;
							display: flex;
							width: 2rem;
							height: 2rem;
							background: #d5e6f6;
							align-items: center;
							img		
								width: 1.6rem;
								height: 1.4rem;
								margin: 0 auto;
					p:last-child
						float: left;
						width: 3.65rem;
						margin-left: 0.2rem;
						padding-top: 0.24rem;
						span
							display: block;	
							overflow: hidden;
							em
								display: block;
								float:left;
						span:first-child
							i
								display: block;
							i:nth-of-type(1)
								font-size: 0.26rem;
								color: #050505;
							i:nth-of-type(2),i:nth-of-type(3)
								font-size: 0.24rem;
								color: #515151;
							em:last-child
								margin-left: 0.48rem;
								img
									width: 0.3rem;
									height: 0.3rem;
						span:last-child
							margin-top: 0.2rem;
							em
								display: block;
								float: left;
							em:first-child
								font-size: 0.3rem;
								color: #eb1a1a;
							em:last-child
								float: right;
								i
									display: block;
									width: 0.4rem;
									height: 0.4rem;
									border: 0.01rem solid #000;
									border-radius: 50%;
									float: left;
									font-size: 0.24rem;
									color: #515151;
									text-align: center;
								span
									float: left;
									margin: 0 0.08rem;
									i
										border: none;
										border-radius: 0;
										float: right;
										display: inline-block;
		.like
			width: 7.02rem;
			margin: 0.3rem auto;
			.title
				width: 100%;
				text-align: center;
				font-size: 0.3rem;
				color: #515151;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url("~imgs/home_bt_03.gif")no-repeat center;
				background-size: 3.26rem 0.08rem;
				margin: 0.2rem 0;
				p
					height: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 0;
				img
					width: 0.29rem;
					height: 0.29rem;
			ul
				width: 7.02rem;
				margin: 0.3rem auto;
				display: flex;
				flex-flow: wrap;
				column-count: 2;
				justify-content: space-between;
				li
					width: 3.4rem;
					img
						width: 3.4rem;
					p:nth-of-type(1)
						width: 3.2rem;
						height: 0.84rem;
						margin: 0 auto;
						text-align: center;
						font-size: 0.24rem;
						color: #515151;
					p:nth-of-type(2)
						width: 2.8rem;
						margin: 0 auto;
						overflow: hidden;
						span:nth-of-type(1)
							font-size: 0.24rem;
							color: #eb1a1a;
							float: left;
						span:nth-of-type(2)	
							font-size: 0.2rem;
							color: #515151;
							float: right;
	.pay
		width: 100%;
		height: 1rem;
		display: flex;
		align-items: center;
		background: #f5f5f5;
		p
			flex: 2;
			display: flex;
			align-items: center;
			span:nth-of-type(1)
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 50%;
				display: block;
				float: left;
				border: 0.01rem solid #515151;
				margin: 0 0.2rem;
				i
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: block;
					background: url("~imgs/shop_cart_3.gif")no-repeat center;
					background-size: 0.16rem 0.16rem;
			span:nth-of-type(2)
				display: block;
				float: left;
				font-size: 0.32rem;
				color: #0a0a0a;
			span:nth-of-type(3)
				display: block;
				font-size: 0.32rem;
				color: #0a0a0a;
				position: relative;
				top: 0.26rem;
				right: -1.4rem;
				i
					color: #e81a1a;
				em
					position: absolute;
					top: -0.4rem;
					right: -0.24rem;
					font-size: 0.24rem;
					color: #515151;
		p + span
			flex: 1;
			background: #5ca2e8;
			height: 100%;
			border: none;
			text-align: center;
			font-size: 0.32rem;
			color: #fff;
			display: flex;
			align-items: center;
			display: block;
			line-height: 1rem;
</style>